import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_htmlful/flutter_htmlful.dart';

import '../../../main.dart';
import '../../global_cubit.dart';
import '../home/home_cubit.dart';
import 'home_mine_cubit.dart';

class HomeMinePage extends StatefulWidget {
  const HomeMinePage({super.key});

  @override
  State<HomeMinePage> createState() => _HomeMinePageState();
}

class _HomeMinePageState extends State<HomeMinePage> {
  @override
  Widget build(BuildContext context) {
    return MultiRepositoryProvider(
      providers: [
        BlocProvider<HomeMineCubit>(
          create: (context) => HomeMineCubit(),
        ),
        BlocProvider.value(value: globalCubit),
      ],
      child: BlocBuilder<GlobalCubit, GlobalState>(
        builder: (BuildContext context, GlobalState state) {
          return Div(
            style: Style(
              width: double.infinity,
              height: double.infinity,
              backgroundColor: Colors.red,
              backgroundGradient: const LinearGradient(
                colors: [
                  Color(0xff65c3aa),
                  Color(0xff96c0aa),
                  Color(0xfffffeaa),
                  Color(0xffEEEFaa),
                  Color(0xffEDEEaa),
                  Color(0xffECEEaa),
                  Color(0xfff2f2f2),
                ],
                stops: [0, 0.08, 0.20, 0.28, 0.30, 0.5, 1],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              scrollable: true,
            ),
            body: SafeArea(
              top: true,
              child: Div(
                body: [
                  Div(
                    body: [
                      Img(
                        src: 'https://cdn.pixabay.com/photo/2024/03/04/16/07/winter-8612635_1280.jpg',
                        errorSrc: 'assets/images/img.png',
                        style: Style(
                          height: 56,
                          width: 56,
                          fit: BoxFit.fill,
                          radius: 1000,
                        ),
                        inkWell: InkWell(
                          onTap: () async {

                          },
                        ),
                      ),
                      Div(
                        body: [
                          Text(
                            '${globalCubit.state.user?.phone}',
                            style: const TextStyle(fontSize: 16),
                          ),
                          Div(
                            body: const Text(
                              'xxxxxxxy',
                              style: TextStyle(
                                fontSize: 12,
                                color: Color(0xffFCE305),
                              ),
                            ),
                            style: Style(
                              backgroundColor: Colors.black,
                              paddingLeft: 10,
                              paddingRight: 10,
                              paddingBottom: 1.5,
                              radius: 1000,
                              marginTop: 4,
                            ),
                          )
                        ],
                        style: Style(marginLeft: 12, flexGrow: 1),
                      ),
                      Div(
                        body: const [
                          Icon(
                            Icons.settings_rounded,
                            size: 20,
                          ),
                          Text(
                            '设置',
                            style: TextStyle(
                              color: Color(0xff333333),
                              fontSize: 12,
                            ),
                          ),
                        ],
                        style: Style(crossAxisAlignment: CrossAxisAlignment.center),
                        inkWell: InkWell(
                          onTap: () {
                            Navigator.pushNamed(context, 'setting');
                          },
                        ),
                      ),
                      Div(
                        body: const [
                          Icon(
                            Icons.qr_code_scanner,
                            size: 20,
                          ),
                          Text(
                            '扫描',
                            style: TextStyle(
                              color: Color(0xff333333),
                              fontSize: 12,
                            ),
                          ),
                        ],
                        style: Style(marginLeft: 20, crossAxisAlignment: CrossAxisAlignment.center),
                        inkWell: InkWell(
                          onTap: () {
                            context.read<HomeMineCubit>().scan(context);
                          },
                        ),
                      )
                    ],
                    style: Style(
                      direction: Axis.horizontal,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      radius: 10,
                      margin: 10,
                    ),
                  ),
                  Div(
                    body: [
                      Div(
                        body: [
                          const Text(
                            '统计',
                            style: TextStyle(fontSize: 14),
                          ),
                          Div(
                            body: const [
                              Text(
                                '查看全部记录',
                                style: TextStyle(
                                  fontSize: 12,
                                  color: Colors.white,
                                  height: 1,
                                ),
                              ),
                              Icon(
                                Icons.chevron_right,
                                size: 16,
                                color: Colors.white,
                              )
                            ],
                            style: Style(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              backgroundColor: const Color(0xff62bdc9),
                              // backgroundGradient: const LinearGradient(
                              //   colors: [Color(0xff41A4D9), Color(0xff41A4D9), Color(0xff40EBD4)],
                              //   begin: Alignment.centerLeft,
                              //   end: Alignment.centerRight,
                              // ),
                              direction: Axis.horizontal,
                              paddingLeft: 8,
                              paddingRight: 6,
                              paddingBottom: 4,
                              paddingTop: 4,
                              radius: 20,
                            ),
                            inkWell: InkWell(
                              onTap: () {
                                debugPrint('查看全部记录');
                              },
                            ),
                          ),
                        ],
                        style: Style(
                          direction: Axis.horizontal,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.center,
                        ),
                      ),
                      Div(
                        body: [1, 2, 3, 4, 5, 6]
                            .map(
                              (e) => Div(
                                body: [
                                  Text(
                                    'text $e',
                                    style: const TextStyle(fontSize: 16),
                                  ),
                                ],
                                style: Style(
                                  backgroundColor: Colors.black12,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  radius: 100,
                                  height: 40 + e * 1,
                                  width: 70 + e * 1,
                                ),
                              ),
                            )
                            .toList(),
                        style: Style(
                          width: double.infinity,
                          direction: Axis.horizontal,
                          alignment: WrapAlignment.spaceBetween,
                          marginTop: 12,
                          wrap: true,
                          spacing: 10,
                          runSpacing: 10,
                        ),
                      )
                    ],
                    style: Style(
                      backgroundColor: Colors.white,
                      radius: 12,
                      marginTop: 24,
                      padding: 12,
                      marginLeft: 10,
                      marginRight: 10,
                    ),
                  ),
                  Div(
                    body: [
                      Div(
                        body: const Text(
                          '功能模块',
                          style: TextStyle(fontSize: 14),
                        ),
                      ),
                      Div(
                        body: [
                          Div(
                            body: [
                              Img(
                                src: 'assets/images/img.png',
                                style: Style(
                                  height: 24,
                                  width: 24,
                                  fit: BoxFit.fill,
                                  marginBottom: 4,
                                ),
                              ),
                              const Text(
                                '模块1',
                                style: TextStyle(
                                  fontSize: 12,
                                ),
                              )
                            ],
                            style: Style(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              border: Border.all(
                                color: const Color(0xffDEDEDE),
                                width: 1,
                              ),
                              radius: 6,
                              paddingTop: 10,
                              paddingBottom: 10,
                              flexGrow: 1,
                            ),
                          ),
                          const VerticalDivider(width: 12),
                          Div(
                            body: [
                              Img(
                                src: 'assets/images/img.png',
                                style: Style(
                                  height: 24,
                                  width: 24,
                                  fit: BoxFit.fill,
                                  marginBottom: 4,
                                ),
                              ),
                              const Text(
                                '模块2',
                                style: TextStyle(
                                  fontSize: 12,
                                ),
                              )
                            ],
                            style: Style(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              border: Border.all(
                                color: const Color(0xffDEDEDE),
                                width: 1,
                              ),
                              radius: 6,
                              paddingTop: 10,
                              paddingBottom: 10,
                              flexGrow: 1,
                            ),
                          ),
                          const VerticalDivider(width: 12),
                          Div(
                            body: [
                              Img(
                                src: 'assets/images/img.png',
                                style: Style(
                                  height: 24,
                                  width: 24,
                                  fit: BoxFit.fill,
                                  marginBottom: 4,
                                ),
                              ),
                              const Text(
                                '模块3',
                                style: TextStyle(
                                  fontSize: 12,
                                ),
                              )
                            ],
                            style: Style(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              border: Border.all(
                                color: const Color(0xffDEDEDE),
                                width: 1,
                              ),
                              radius: 6,
                              paddingTop: 10,
                              paddingBottom: 10,
                              flexGrow: 1,
                            ),
                            inkWell: InkWell(
                              onTap: () {
                                debugPrint('onTap 11111');
                              },
                            ),
                          ),
                        ],
                        style: Style(
                          direction: Axis.horizontal,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          marginTop: 12,
                        ),
                      )
                    ],
                    style: Style(
                      backgroundColor: Colors.white,
                      radius: 12,
                      marginTop: 12,
                      padding: 12,
                      marginLeft: 10,
                      marginRight: 10,
                    ),
                  ),
                  BlocBuilder<HomeMineCubit, HomeMineState>(
                    builder: (BuildContext context, HomeMineState state) {
                      return Div(
                        body: state.projects
                            .map(
                              (e) => Div(
                                body: [
                                  const Icon(Icons.ac_unit),
                                  Div(
                                    body: Text('${e?.url}'),
                                    style: Style(marginLeft: 12, flexGrow: 1),
                                  ),
                                  const Icon(Icons.chevron_right, color: Color(0xff999999)),
                                ],
                                style: Style(
                                  direction: Axis.horizontal,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  padding: 12,
                                ),
                                inkWell: InkWell(
                                  onTap: () {
                                    // context.read<HomeCubit>().changeNavigationBarIndex(0);
                                    context.read<HomeMineCubit>().requestData();
                                  },
                                ),
                              ),
                            )
                            .toList(),
                        style: Style(
                          margin: 10,
                          backgroundColor: Colors.white,
                          radius: 12,
                        ),
                      );
                    },
                  ),
                  BlocBuilder<HomeCubit, HomeState>(builder: (BuildContext context, HomeState state) {
                    return Div(
                      body: [
                        Text(
                          '退出 ${state.currentIndex}',
                          style: const TextStyle(color: Colors.white, fontSize: 16),
                        )
                      ],
                      style: Style(
                        padding: 10,
                        margin: 10,
                        mainAxisAlignment: MainAxisAlignment.center,
                        direction: Axis.horizontal,
                        radius: 1000,
                        backgroundGradient: const LinearGradient(
                          colors: [Color(0xff41A4D9), Color(0xff41A4D9), Color(0xff40EBD4)],
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                        ),
                      ),
                      inkWell: InkWell(
                        onTap: () {
                          debugPrint('退出');
                          Navigator.popAndPushNamed(context, 'login');
                        },
                      ),
                    );
                  })
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
